<template>
    <div class="app">
        <myNavbar title="商品评价"></myNavbar>
        <list>
          <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                   :display="refreshing ? 'show' : 'hide'">
            <text class="indicator-text">Refreshing ...</text>
            <loading-indicator class="indicator"></loading-indicator>
          </refresh>
          <cell>
            <div class="comments_box" v-for="item in commentsData" :key="item">
              <div class="comments_header">
                <image :src="item.thumbnail" class="comments_header_img"></image>
                <text class="comments_header_title">{{item.name}}</text>
              </div>
              <div class="evaluation_product_evaluation">
                <text v-for="(items,idx) in icon" :class="[idx <= item.star?'evaluation_logistics_xingxing':'evaluation_logistics_no_xingxing']">&#xe6b9;</text>
                <text class="comments_subtitle" style="margin-bottom: 6px">（{{(item.star == 0 || item.star == 1)?'差评':item.star == 2 ?'中评':'好评'}}）</text>
              </div>
              <text class="comments_title">{{item.content == ''?'此用户没有填写评论':item.content}}</text>
              <div v-if="item.meta != undefined" style="display:flex;flex-direction: row;flex-wrap: wrap;position: relative;">
                <div v-for="(items,index) in item.meta" style="margin-bottom:10px;margin-left: 10px;margin-right: 10px;">
                  <div v-if="items.type ==2" style="width:210px;height:210px;background-color: rgba(0,0,0,0.3)" @click="videoClick(items.url)">
                    <video style="width:210px;height:210px;background-color: rgba(0,0,0,0.3)" controls="nocontrols" :src="items.url"></video>
                  </div>
                  <image style="width:210px;height:210px" v-if="items.type ==1" :src="items.url" @click="imgClick(item.meta)"></image>
                </div>
                <!--                <div @click="metaClick(item.meta)" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>-->
              </div>
              <text class="comments_subtitle">规格：{{item.spec}}</text>
              <text class="comments_date">{{item.createDate}}</text>
            </div>
          </cell>
          <loading v-if="commentsData.length>=4" class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
            <text class="indicator-text">Loading ...</text>
            <loading-indicator class="indicator"></loading-indicator>
          </loading>
        </list>

        <div class="isMask" v-if="metaType == true">
            <div class="cancel_box" @click="cancelClick">
                <text class="details_evaluation_header_icon">&#xe6ce;</text>
            </div>
            <slider class="slider" interval="3000" @change="changeHandler">
                <div class="frame" v-for="img in images">
                    <image class="image" resize="cover" :src="img"></image>
                </div>
                <div class="frame" v-for="img in video">
                    <video class="image" :play-status="state" :src="img" autoplay controls @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
                </div>
            </slider>

        </div>
    </div>
</template>
<script>
    import upload from '../../../components/upload/upload.vue'
    import {
        reviewList
    } from '../../../api/review.js'
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    const picture = app.requireModule("eeui/picture");
    export default {
        name: '',
        data() {
            return {
                images: [],
                video: [],
                state: 'pause',
                evaluationData: [],
                commentsData: [],
                meta: [],
                metaType: false,
                pageNum: 1,
                pageSize: 10,
                loading: true,
                id: '',
                icon: [false, false, false, false, false],
              refreshing: false,
              loadinging: false,
            }
        },
        created() { // 在实例创建完成后被立即调用
            this.initIconFont()
            this.id = app.config.params
            this.loadList()
        },
        methods: {
            onstart(event) {
                this.state = 'onstart'
            },
            onpause(event) {
                this.state = 'onpause'
            },
            onfinish(event) {
                this.state = 'onfinish'
            },
            onfail(event) {
                this.state = 'onfinish'
            },
            loadList() {
                var _this = this
                reviewList({
                    productId: this.id,
                    pageSize: _this.pageSize,
                    pageNum: _this.pageNum,
                }).then(res => {
                    console.log(res)
                    if (res.type == 'success') {
                        res.data.data.forEach(item => {
                            if (!this.isEmptyString(item.meta)) {
                                item.meta = JSON.parse(item.meta)
                            }

                            item.createDate = this.formatTime(item.createDate)
                            _this.commentsData.push(item)
                        })
                      _this.loading = _this.pageSize <= res.data.data.length;
                    }
                }).catch(error => {
                    eeui.toast(error)
                })
            },
            metaClick(data) {
                this.video = []
                this.images = []
                var _this = this
                _this.meta = data
                _this.meta.forEach(item => {
                    if (item.type == 2) {
                        this.video.push(item.url)
                    } else if (item.type == 1) {
                        this.images.push(item.url)
                    }
                })
                _this.metaType = true
            },
            changeHandler() {
                this.state = 'pause'
            },
            cancelClick() {
                var _this = this
                _this.metaType = false
            },
            videoClick(item){
                console.log('点击图片了')
                // var video = []
                // video.push(item)
                // console.log(video)
                picture.videoPreview(item)
            },
            imgClick(item){
                console.log(item)
                var image = []
                item.forEach(function (items) {
                    if (items.type == 1){
                        image.push(items.url)
                    }
                })
                picture.picturePreview(0,image)
            },
          onrefresh(event) {
            var _this = this
            console.log('下拉完成')
            this.refreshing = true
            setTimeout(() => {
              _this.pageNum = 1;
              _this.commentsData = []
              _this.loadList()
              _this.refreshing = false
            }, 2000)
          },
          onpullingdown(event) {
            console.log('下拉了')
          },
          onloading(event) {
            var _this = this
            this.loadinging = true
            setTimeout(() => {
              console.log(_this.loading)
              if (_this.loading == true) {
                _this.pageNum = this.pageNum + 1;
                _this.loadList()
              }
              _this.loadinging = false
            }, 2000)
          },
        },
        components: {
            upload, myNavbar
        },
    }
</script>

<style scoped>
    .app {
        flex: 1;
        background-color: rgba(248, 248, 248, 0.8);
    }

    .image {
        width: 700px;
        height: 700px;
    }

    .comments_box {
        margin-top: 20px;
        padding: 20px;
        box-sizing: border-box;
        background-color: white;
    }

    .frame {
        width: 700px;
        height: 700px;
        position: relative;
    }

    .comments_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 10px;
    }

    .details_evaluation_header_icon {
        font-family: iconfont2;
        font-size: 38px;
        color: white;
    }

    .evaluation_img {
        width: 750px;
        height: 750px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 25px;
        box-sizing: border-box;
    }

    .navbar {
        width: 750px;
        height: 100px;
        margin-bottom: 20px;
    }

    .comments_header_img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: red;
    }

    .comments_header_title {
        font-size: 28px;
        display: block;
        margin-left: 20px;
    }

    .comments_title {
        font-size: 28px;
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .comments_subtitle {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.6);
        margin-top: 10px;
        padding-left: 10px;
    }

    .comments_date {
        font-size: 24px;
        display: block;
        padding-top: 20px;
        color: rgba(0, 0, 0, 0.3);
        padding-left: 10px;
    }

    .isMask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .cancel_box {
        position: absolute;
        top: 160px;
        left: 20px;
        /* background-color: rgba(248, 248, 248, 0.8); */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .cancel_title {
        font-size: 40px;
        color: white;

    }
    .slider {
        margin-top: 25px;
        margin-left: 25px;
        width: 700px;
        height: 700px;
        z-index: 1;
        border-radius: 10px;
        overflow: hidden;
    }
    .evaluation_product_evaluation {
      width: 700px;
      display: flex;
      flex-direction: row;
      /* justify-content: space-between; */
      align-items: center;
      margin-top: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }
    .evaluation_product_evaluation_row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .evaluation_logistics_xingxing {
      font-size: 50px;
      font-weight: 400;
      color: #eb594f;
      /*line-height: 42px;*/
      font-family: iconfont2;
    }

    .evaluation_logistics_no_xingxing {
      font-size: 50px;
      font-weight: 400;
      color: rgba(26, 26, 30, 0.1);
      /*line-height: 42px;*/
      font-family: iconfont2;
    }
    .refresh {
      width: 750px;
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      align-items: center;
    }

    .loading {
      width: 750px;
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      align-items: center;
    }

    .indicator-text {
      color: #888888;
      font-size: 42px;
      text-align: center;
    }

    .indicator {
      margin-top: 16px;
      height: 40px;
      width: 40px;
      color: blue;
    }
</style>
